<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="/static/css/public.css" media="all">
		<style>
			body {
				background-color: #ffffff;
			}

			.img {
				width: 300px;
				height: 300px;
				border: black 1px solid;
				background-color: darkgrey;
				object-fit: cover;
				object-position: 50% 20%;
			}

			/* 图片自适应的样式 */
			.img-object {
				object-fit: cover;
				object-position: 50% 20%;
			}
		</style>
	</head>
	<body>

		<div class="layui-upload">
			<button type="button" class="layui-btn" id="upload_img">图片上传</button>
			<button type="button" id="remove-img" class="layui-btn layui-btn-sm layui-btn-normal"><i
					class="layui-icon"></i> 删除已上传图片</button>
			<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				预览图：
				<div class="layui-upload-list" id="view_upload_img"></div>
			</blockquote>
		</div>

		<div class="layui-form layuimini-form">

			<div class="layui-form-item">
				<label class="layui-form-label required">标题</label>
				<div class="layui-input-block">
					<input type="text" id="course_title" name="course_title" lay-verify="required" lay-reqtext="标题不能为空"
						placeholder="请输入标题" value="" class="layui-input">
					<!-- <tip>填写自己管理账号的名称。</tip> -->
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label required">类目</label>
				<div class="layui-input-block">
					<select id="contents" name="contents" lay-filter="leimu" lay-verify="required">
						<option value="" selected=""></option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">标签</label>
				<div class="layui-input-block">
					<select id="label" name="label" lay-filter="biaoqian">
						<option value="" selected=""></option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label required">正常价格</label>
				<div class="layui-input-block">
					<input type="number" id="normal_price" name="normal_price" lay-verify="required"
						lay-reqtext="价格不能为空" placeholder="请输入价格" value="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label required">VIP价格</label>
				<div class="layui-input-block">
					<input type="number" id="vip_price" name="vip_price" lay-verify="required" lay-reqtext="价格不能为空"
						placeholder="请输入价格" value="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label required">课程介绍</label>
				<div class="layui-input-block">
					<textarea id="courses_introduce" name="courses_introduce" class="layui-textarea"
						lay-verify="required" placeholder="请输入课程介绍"></textarea>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label required">课程目录</label>
				<div class="layui-input-block">
					<textarea id="courses_contents" name="courses_contents" class="layui-textarea" lay-verify="required"
						placeholder="请输入课程目录"></textarea>
				</div>
			</div>


			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
				</div>
			</div>
		</div>
		<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<script>
			function getCookie(name) {
				var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
				return r ? r[1] : undefined;
			}

			var course_id = parent.course_id;
			var title = parent.title;
			var contents_id = parent.contents_id;
			var label_id = parent.label_id;
			var normal_price = parent.normal_price;
			var vip_price = parent.vip_price;
			var introduce = parent.introduce;
			var contents = parent.contents;

			// var label_level = parent.label_level;
			// var label_parent_id = "0";
			// console.log(parent);
			// console.log(course_id);
			// console.log(title);
			// console.log(contents_id);
			// console.log(label_id);
			// console.log(normal_price);
			// console.log(vip_price);
			// console.log(introduce);
			// console.log(contents);

			var req_data = {
				"course_id": course_id
			}



			layui.use(['form'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.$,
					upload = layui.upload,
					element = layui.element;


				var input_course_title = document.getElementById("course_title"); //获取input对象
				var input_normal_price = document.getElementById("normal_price");
				var input_vip_price = document.getElementById("vip_price");

				input_course_title.setAttribute("value", title); //为input对象设置value属性和值
				input_normal_price.setAttribute("value", normal_price);
				input_vip_price.setAttribute("value", vip_price);
				$("#courses_introduce").val(introduce);
				$("#courses_contents").val(contents);


				var image_list = new Array();
				// 获取课程详情，并渲染图片
				$.ajax({
					type: "post", //get或者post
					contentType: 'application/json',
					headers: {
						'X-CSRFToken': getCookie('csrf_token')
					},
					url: '/api/v1.0/get_course_detail',
					data: JSON.stringify(req_data), //参数 接口传参 json对象
					success: function(res) {
						$.each(res.data.imagelist, function(index, value) {
							// console.log(value)
							// console.log(value.image_name)
							image_list.push(value.image_name)
							var img = new Image();
							img.src = value.screenshot_url
							img.setAttribute('class', 'img')
							img.setAttribute('value', value.image_id)
							$('#view_upload_img').append(img)
							// layui.form.render("img");
						});
						// layui.form.render("img");
					}
				});


				$.ajax({
					type: "post", //get或者post
					contentType: 'application/json',
					headers: {
						'X-CSRFToken': getCookie('csrf_token')
					},
					url: '/api/v1.0/get_contents_all_list',
					data: {}, //参数 接口传参 json对象
					success: function(res) {
						console.log(res);
						$.each(res.data, function(index, value) {
							// console.log(index);
							// console.log(value);
							if (value.contents_level != "0") {
								// console.log(value.contents_level)
								$.each(res.data, function(index, valueparent) {
									// console.log(valueparent.contents_level)
									if (value.contents_level == valueparent.contents_id) {
										if (value.contents_id == contents_id) {
											var option = "<option value='" + contents_id +
												"' selected=''>" + value.contents_name +
												"</option>"
											// console.log(option)
											$('#contents').append(option)
										} else {
											$('#contents').append(new Option(valueparent
												.contents_name +
												" > " + value.contents_name, value
												.contents_id));
										}
									}
								})
							} else {
								if (value.contents_id == contents_id) {
									var option = "<option value='" + contents_id + "' selected=''>" +
										value.contents_name + "</option>"
									// console.log(option)
									$('#contents').append(option)
								} else {
									$('#contents').append(new Option(value.contents_name, value
										.contents_id)); // 下拉菜单里添加元素
								}
							}
						});
						layui.form.render("select");
					}
				});


				$.ajax({
					type: "post", //get或者post
					contentType: 'application/json',
					headers: {
						'X-CSRFToken': getCookie('csrf_token')
					},
					url: '/api/v1.0/get_labels_all_list',
					data: {}, //参数 接口传参 json对象
					success: function(res) {
						// console.log(res);
						$.each(res.data, function(index, value) {
							// console.log(index);
							// console.log(value);
							if (value.label_id == label_id) {
								var option = "<option value='" + label_id + "' selected=''>" + value
									.label_name + "</option>"
								// console.log(option)
								$('#label').append(option)
							} else {
								$('#label').append(new Option(value.label_name, value
									.label_id)); // 下拉菜单里添加元素
							}

						});
						layui.form.render("select");
					}
				});


				var course_img = new Array();
				//多图片上传
				upload.render({
					elem: '#upload_img',
					url: '/api/v1.0/upload_img' //此处配置你自己的上传接口即可
						,
					headers: {
						'X-CSRFToken': getCookie('csrf_token')
					},
					multiple: true,
					done: function(res) {
						$('#view_upload_img').append('<img src="' + res.data["course_url"] +
							'" class="img">')
						course_img.push(res.data["file_name"])
						// console.log(course_img)
					}
				});
				// 删除图片并清空course_img数组
				$(document).ready(function() {
					$("#remove-img").click(function() {
						image_list = [];
						course_img = [];
						$("img").each(function(i, e) {
							$(this).remove();
						});
					});
				});


				var img_data = {
					"course_img": course_img
				}
				//监听提交
				form.on('submit(saveBtn)', function(data) {
					// console.log(data)
					// console.log(data.field)
					if (image_list.length == 0 && course_img.length == 0) {
						layer.msg("至少上传一张图片")
						return false;
					}
					// if (course_img.length == 0) {
					// 	layer.msg("至少上传一张图片")
					// 	return false;
					// }
					var requests_data = data.field;
					requests_data.course_img = course_img;
					requests_data.course_id = course_id;
					// console.log(requests_data)
					$.ajax({
						type: "post", //get或者post
						contentType: 'application/json',
						headers: {
							'X-CSRFToken': getCookie('csrf_token')
						},
						url: '/api/v1.0/edit_course',
						data: JSON.stringify(requests_data), //参数 接口传参 json对象
						success: function(res) {
							var index = layer.alert("保存成功", {
								title: '操作'
							}, function() {
								// 关闭弹出层
								layer.close(index);
								// 刷新列表页
								window.parent.location.reload()
							});
						}
					});
					return false;
				});

			});
		</script>
	</body>
</html>
